import { StatusBar } from 'expo-status-bar';
import { StyleSheet, Text, View, Image } from 'react-native';
import { NavigationContainer, useFocusEffect } from '@react-navigation/native';
import { createNativeStackNavigator } from '@react-navigation/native-stack';
import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
import { Entypo } from '@expo/vector-icons';
import Home from './src/page/Home'
import MyCrops from './src/page/MyCrops'
import News from './src/page/News'
import Mine from './src/page/Mine'
import Login from './src/page/Login'
import Head from './src/page/Head'
import Register from './src/page/Register'
import Coin from './src/component/Mine/Coin'
import MoreTopics from './src/component/News/MoreTopics'
import Topic from './src/component/News/Topic'
import AddNews from './src/component/News/AddNews'
import PlantImage from './src/component/News/PlantImage'
import Detail from './src/component/Mine/Detail';
import Accounts from './src/component/Mine/Accounts';
import Sign from './src/component/Mine/Sign';
import Setting from './src/component/Mine/Setting';
import PayList from './src/component/Mine/PayList';
import Advice from './src/component/Mine/Advice';
import CropDetail from './src/component/Crops/CropDetail';
import Collection from './src/component/Mine/Collection';
import CollectionInfo from './src/component/Mine/CollectionInfo';
import Withus from './src/component/Mine/WithUs';
import CoinTips from './src/component/Mine/CoinTips';
import BillInfo from './src/component/Mine/BillInfo';
import MyCamera from './src/component/Crops/MyCamera';
import AddCrops from './src/component/Crops/AddCrop'
import GoodDetail from './src/component/Home/GoodDetail';
import Buy from './src/component/Home/Buy';
import Evaluation from './src/component/Home/Evaluation';
import Address from './src/component/Home/Address';
import AuthProvider from './src/context/AuthProvider';
import NewsComment from './src/component/News/NewsComment'
import AddAddress from './src/component/Home/AddAddress'
import MineNews from './src/component/Mine/MineNews'
import Message from './src/component/News/Message'
import MyNews from './src/component/Mine/MyNews'
import NowGrow from './src/component/Mine/NowGrow'

// import Citys from './src/component/Mine/Citys';
import { LogBox } from "react-native";
import PotDetail from './src/component/Mine/PotDetail';
import Evalu from './src/component/Mine/Evalu';
import Cropimgs from './src/component/Crops/Cropimgs';

LogBox.ignoreLogs([
  "ViewPropTypes will be removed",
  "ColorPropType will be removed",
  "requestPermissionsAsync()",
  "componentWillUpdate has been renamed",
  "componentWillReceiveProps has been renamed",
  "Animated.event now requires a second argument for options"
])
const Stack = createNativeStackNavigator();
const Tab = createBottomTabNavigator();
const TabBar = () => (
  <Tab.Navigator
    screenOptions={({ route }) => ({
      // tabBarInactiveTintColor: '#9AD37A',
      tabBarLabelStyle: { fontSize: 10 },
      headerTitleAlign: 'center',
      tabBarInactiveTintColor: '#fff',
      tabBarStyle: { backgroundColor: '#9AD37A', height: '6.9%', },
      tabBarBadge: route.params
    })}
  >
    <Tab.Screen
      options={
        ({ navigation }) => (
          {
            headerShown: false,
            title: '作物',

            tabBarIcon: ({ color, size, focused }) => (
              focused
                ? <Image source={require('./images/tabImgs/clickcrops.png')} style={{ height: '95%', width: '35%' }}></Image>
                : <Image source={require('./images/tabImgs/uncrops.png')} style={{ height: '95%', width: '35%' }}></Image>
            )
          }
        )
      }
      name='MyCrops'
      component={MyCrops}
    />
    <Tab.Screen
      options={{
        headerShown: false,
        title: '百科',
        tabBarIcon: ({ color, size, focused }) => (
          focused
            ? <Image source={require('./images/tabImgs/clicknews.png')} style={{ height: '90%', width: '35%' }}></Image>
            : <Image source={require('./images/tabImgs/unnews.png')} style={{ height: '90%', width: '35%' }}></Image>
        )
      }}
      name='News'
      component={News}
    />
    <Tab.Screen
      options={
        ({ navigation }) => (
          {
            headerShown: false,
            title: '商城',
            tabBarIcon: ({ color, size, focused }) => (
              focused
                ? <Image source={require('./images/tabImgs/clickday.png')} style={{ height: '95%', width: '35%' }}></Image>
                : <Image source={require('./images/tabImgs/unday.png')} style={{ height: '95%', width: '35%' }}></Image>
            )
          }
        )
      }
      name='Home'
      component={Home}
    />
    <Tab.Screen
      name='Mine'
      component={Mine}
      options={
        ({ navigation }) => (
          {
            headerShown: false,
            title: '我的',
            tabBarIcon: ({ color, size, focused }) => (
              focused
                ? <Image source={require('./images/tabImgs/clickme.png')} style={{ height: '90%', width: '32%' }}></Image>
                : <Image source={require('./images/tabImgs/unme.png')} style={{ height: '90%', width: '32%' }}></Image>
            )
          }
        )
      }
    />
  </Tab.Navigator>
)

export default function App() {
  return (
    <AuthProvider>
      <NavigationContainer>
        <StatusBar barStyle={'default'} hidden={true} />
        <Stack.Navigator>
          <Stack.Screen
            name='head'
            component={Head}
            options={{
              headerShown: false
            }}
          />

          <Stack.Screen
            name='tab'
            component={TabBar}
            options={{
              headerShown: false
            }}
          />
          <Stack.Screen
            name='coin'
            component={Coin}
            options={
              ({ navigation }) => ({
                title: "硬币",
                headerLeft: () => (
                  <Entypo name="chevron-thin-left" size={22} color="black" onPress={navigation.goBack} />
                )
              })}
          />
          <Stack.Screen
            name='message'
            component={Message}
            options={
              ({ navigation }) => ({
                title: " ",
                headerLeft: () => (
                  <Entypo name="chevron-thin-left" size={22} color="black" onPress={navigation.goBack} />
                )
              })}
          />
          <Stack.Screen
            name='mineNews'
            component={MineNews}
            options={
              ({ navigation }) => ({
                title: "论坛",
                headerLeft: () => (
                  <Entypo name="chevron-thin-left" size={22} color="black" onPress={navigation.goBack} />
                )
              })}
          />
          {/* 我的作物 */}
          <Stack.Screen
            name='cropdetail'
            component={CropDetail}
          />
          <Stack.Screen
            name='mycamera'
            component={MyCamera}
            options={
              ({ navigation }) => ({
                headerShown: false,
              })}
          />
          <Stack.Screen
            name='cropimgs'
            component={Cropimgs}
            options={
              ({ navigation }) => ({
                title: '日志详情',
                headerLeft: () => (
                  <Entypo name="chevron-thin-left" size={22} color="black" onPress={navigation.goBack} />
                )
              })}
          />
          <Stack.Screen
            name='mynews'
            component={MyNews}
            options={
              ({ navigation }) => ({
                title: '我的动态',
                headerLeft: () => (
                  <Entypo name="chevron-thin-left" size={22} color="black" onPress={navigation.goBack} />
                )
              })}
          />
          <Stack.Screen
            name='nowgrow'
            component={NowGrow}
            options={
              ({ navigation }) => ({
                title: '正在种植',
                headerLeft: () => (
                  <Entypo name="chevron-thin-left" size={22} color="black" onPress={navigation.goBack} />
                )
              })}
          />
          {/* 购物 */}
          <Stack.Screen
            name='gooddetail'
            component={GoodDetail}
            options={
              ({ navigation }) => ({
                title: '商品详情',
                headerLeft: () => (
                  <Entypo name="chevron-thin-left" size={22} color="black" onPress={navigation.goBack} />
                )
              })}
          />
          <Stack.Screen
            name='buy'
            component={Buy}
            options={
              ({ navigation }) => ({
                title: '确认订单',
                headerLeft: () => (
                  <Entypo name="chevron-thin-left" size={22} color="black" onPress={navigation.goBack} />
                )
              })}
          />
          <Stack.Screen
            name='evaluation'
            component={Evaluation}
            options={
              ({ navigation }) => ({
                title: '评论',
                headerLeft: () => (
                  <Entypo name="chevron-thin-left" size={22} color="black" onPress={navigation.goBack} />
                )
              })}
          />
          <Stack.Screen
            name='address'
            component={Address}

          />
          <Stack.Screen
            name='addaddress'
            component={AddAddress}
            options={
              ({ navigation }) => ({
                title: "添加新地址",
                headerLeft: () => (
                  <Entypo name="chevron-thin-left" size={22} color="black" onPress={navigation.goBack} />
                )
              })}
          />
          <Stack.Screen
            name='topic'
            component={Topic}
            options={
              ({ navigation }) => ({
                title: "热点话题",
                headerLeft: () => (
                  <Entypo name="chevron-thin-left" size={22} color="black" onPress={navigation.goBack} />
                )
              })}
          />
          <Stack.Screen
            name='moreTopics'
            component={MoreTopics}
            options={
              ({ navigation }) => ({
                title: "更多",
                headerLeft: () => (
                  <Entypo name="chevron-thin-left" size={22} color="black" onPress={navigation.goBack} />
                )
              })}
          />
          <Stack.Screen
            name='addNews'
            component={AddNews}
            options={
              ({ navigation }) => ({
                title: "写帖子",
                headerLeft: () => (
                  <Entypo name="chevron-thin-left" size={22} color="black" onPress={navigation.goBack} />
                )
              })}
          />
          <Stack.Screen
            name='newsComment'
            component={NewsComment}
            options={
              ({ navigation }) => ({
                title: "动态详情",
                headerLeft: () => (
                  <Entypo name="chevron-thin-left" size={22} color="black" onPress={navigation.goBack} />
                )
              })}
          />
          <Stack.Screen
            name='plantImage'
            component={PlantImage}
            options={
              ({ navigation }) => ({
                headerLeft: () => (
                  <Entypo name="chevron-thin-left" size={22} color="black" onPress={navigation.goBack} />
                )
              })}
          />
          {/* 我的 */}
          <Stack.Screen
            name='detail'
            component={Detail}
            options={
              ({ navigation }) => ({
                title: "硬币明细",
                headerLeft: () => (
                  <Entypo name="chevron-thin-left" size={22} color="black" onPress={navigation.goBack} />
                )
              })}
          />
          <Stack.Screen
            name='accounts'
            component={Accounts}
            options={
              ({ navigation }) => ({
                title: "修改用户信息",
                headerLeft: () => (
                  <Entypo name="chevron-thin-left" size={22} color="black" onPress={navigation.goBack} />
                )
              })}
          />
          <Stack.Screen
            name='sign'
            component={Sign}
            options={
              ({ navigation }) => ({
                title: "签到成功",
                headerLeft: () => (
                  <Entypo name="chevron-thin-left" size={22} color="black" onPress={navigation.goBack} />
                )
              })}
          />
          <Stack.Screen
            name='potdetail'
            component={PotDetail}
            options={
              ({ navigation }) => ({
                title: "花盆详情",
                headerLeft: () => (
                  <Entypo name="chevron-thin-left" size={22} color="black" onPress={navigation.goBack} />
                )
              })}
          />
          <Stack.Screen
            name='setting'
            component={Setting}
            options={
              ({ navigation }) => ({
                title: "设置",
                headerLeft: () => (
                  <Entypo name="chevron-thin-left" size={22} color="black" onPress={navigation.goBack} />
                )
              })}
          />
          <Stack.Screen
            name='paylist'
            component={PayList}
            options={
              ({ navigation }) => ({
                title: "我的订单",
                headerLeft: () => (
                  <Entypo name="chevron-thin-left" size={22} color="black" onPress={navigation.goBack} />
                )
              })}
          />
          <Stack.Screen
            name='evalu'
            component={Evalu}
            options={
              ({ navigation }) => ({
                title: "商品评价",
                headerLeft: () => (
                  <Entypo name="chevron-thin-left" size={22} color="black" onPress={navigation.goBack} />
                )
              })}
          />
          <Stack.Screen
            name='advice'
            component={Advice}
            options={
              ({ navigation }) => ({
                title: "问题反馈",
                headerLeft: () => (
                  <Entypo name="chevron-thin-left" size={22} color="black" onPress={navigation.goBack} />
                )
              })}
          />
          <Stack.Screen
            name='collection'
            component={Collection}
            options={
              ({ navigation }) => ({
                title: "我的收藏",
                headerLeft: () => (
                  <Entypo name="chevron-thin-left" size={22} color="black" onPress={navigation.goBack} />
                )
              })}
          />
          <Stack.Screen
            name='withus'
            component={Withus}
            options={
              ({ navigation }) => ({
                title: "关于我们",
                headerLeft: () => (
                  <Entypo name="chevron-thin-left" size={22} color="black" onPress={navigation.goBack} />
                )
              })}
          />
          <Stack.Screen
            name='cointips'
            component={CoinTips}
            options={
              ({ navigation }) => ({
                title: "硬币攻略",
                headerLeft: () => (
                  <Entypo name="chevron-thin-left" size={22} color="black" onPress={navigation.goBack} />
                )
              })}
          />
          <Stack.Screen
            name='billinfo'
            component={BillInfo}
            options={
              ({ navigation }) => ({
                title: "订单详情",
                headerLeft: () => (
                  <Entypo name="chevron-thin-left" size={22} color="black" onPress={navigation.goBack} />
                )
              })}
          />
          <Stack.Screen
            name='addCrops'
            component={AddCrops}
            options={
              ({ navigation }) => ({
                title: "添加作物",
                headerLeft: () => (
                  <Entypo name="chevron-thin-left" size={22} color="black" onPress={navigation.goBack} />
                )
              })}
          />
          <Stack.Screen
            name='login'
            component={Login}
            options={{
              headerShown: false
            }}
          />
          <Stack.Screen
            name='register'
            component={Register}
            options={{
              headerShown: false
            }}
          />
        </Stack.Navigator>
      </NavigationContainer>
    </AuthProvider>

  );
}
